<template>
    <div class="bz-sub-container">
        <div class="bz-panel bz-panel-default">
            <div class="bz-panel-heading text-success">
                项目的属性
            </div>
            <div class="bz-panel-body">
                <div class="bz-paragraph">
                    <ul class="bz-code">
                        <li>order</li>
                        <li>flex-grow</li>
                        <li>flex-shrink</li>
                        <li>flex-basis</li>
                        <li>flex</li>
                        <li>align-self</li>
                    </ul>
                </div>
                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">
                        order属性
                    </div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                            <span class="bz-badge-secondary">order</span>属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
                        </div>
                        <div class="bz-paragraph">
                <pre v-highlightjs=""><code class="css">.item {
  order: &lt;integer&gt;
}</code></pre>
                        </div>
                    </div>
                </div>

                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">flex-grow属性</div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                            <span class="bz-badge-secondary">flex-grow</span>属性定义项目的放大比例，默认为 <span
                                class="bz-badge-secondary">0</span>，即如果存在剩余空间，也不放大。
                        </div>
                        <div class="bz-paragraph">
                            <pre v-highlightjs=""><code class="css">.item {
  flex-grow: &lt;number&gt; /* default 0 */
}</code></pre>
                        </div>
                        <div class="bz-paragraph">
                            <img src="../assets/images/flex-item-grow.png" alt="" class="bz-code-img">
                        </div>
                        <div class="bz-paragraph">
                            如果所有项目的 <span class="bz-badge-secondary">flex-grow</span>属性都为 <span
                                class="bz-badge-secondary">1</span>，则它们将等分剩余空间（如果有的话）。如果一个项目的 <span
                                class="bz-badge-secondary">flex-grow</span>属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
                        </div>
                    </div>
                </div>

                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">flex-shrink属性</div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                            <span class="bz-badge-secondary">flex-shrink</span>属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
                        </div>
                        <div class="bz-paragraph">
                            <pre v-highlightjs=""><code class="css">.item {
  flex-shrink: &lt;number&gt; /* default 1 */
}</code></pre>
                        </div>
                        <div class="bz-paragraph">
                            <img src="../assets/images/flex-item-shrink.jpg" alt="" class="bz-code-img">
                        </div>
                        <div class="bz-paragraph">
                            如果所有项目的 <span class="bz-badge-secondary">flex-shrink</span>属性都为1，当空间不足时，都将等比例缩小。如果一个项目的
                            <span class="bz-badge-secondary">flex-shrink</span>属性为0，其他项目都为1，则空间不足时，前者不缩小。
                            负值对该属性无效。
                        </div>
                    </div>
                </div>

                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">flex-basis属性</div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                            <span class="bz-badge-secondary">flex-basis</span>属性定义了在分配多余空间之前，项目占据的主轴空间（main
                            size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
                        </div>
                        <div class="bz-paragraph">
                            <pre v-highlightjs=""><code class="css">.item {
  flex-basis: &lt;length&gt; | auto; /* default auto */
}</code></pre>
                        </div>
                        <div class="bz-paragraph">
                            它可以设为跟 <span class="bz-badge-secondary">width</span>或 <span class="bz-badge-secondary">height</span>属性一样的值（比如350px），则项目将占据固定空间。
                        </div>
                    </div>
                </div>

                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">flex属性</div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                            <span class="bz-badge-secondary">flex</span>属性是 <span
                                class="bz-badge-secondary">flex-grow</span>, <span class="bz-badge-secondary">flex-shrink</span>
                            和 <span class="bz-badge-secondary">flex-basis</span>的简写，默认值为0 1
                            auto。后两个属性可选。
                        </div>
                        <div class="bz-paragraph">
                            <pre v-highlightjs=""><code class="css">.item {
  flex: none | [ &lt;flex-grow&gt; &lt;flex-shrink&gt;? || &lt;flex-basis&gt; ]
}</code></pre>
                        </div>
                        <div class="bz-paragraph">
                            该属性有两个快捷值：<span class="bz-badge-secondary">auto (1 1 auto)</span> 和 <span
                                class="bz-badge-secondary">none (0 0 auto)</span>。
                            建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
                        </div>
                    </div>
                </div>

                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">align-self属性</div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                            <span class="bz-badge-secondary">align-self</span>属性允许单个项目有与其他项目不一样的对齐方式，可覆盖<span
                                class="bz-badge-secondary">align-items</span>属性。默认值为<span class="bz-badge-secondary">auto</span>，表示继承父元素的<span
                                class="bz-badge-secondary">align-items</span>属性，如果没有父元素，则等同于<span
                                class="bz-badge-secondary">stretch</span>。
                        </div>
                        <div class="bz-paragraph">
                            <pre v-highlightjs=""><code class="css">.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}</code></pre>
                        </div>
                        <div class="bz-paragraph">
                            <img src="../assets/images/flex-item-align-self.png" alt="" class="bz-code-img">
                        </div>
                        <div class="bz-paragraph">
                            该属性可能取6个值，除了 <span class="bz-badge-secondary">auto</span>，其他都与 <span
                                class="bz-badge-secondary">align-items</span>属性完全一致。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "Flex",
    }
</script>

<style lang="less" scoped>
    @import "../assets/style/flex";
</style>
